import React from 'react';
import { Table } from 'antd';
import Actions from 'src/components/Actions';
import ResultStyle from './resultStyle';
import { findVariableName, getVariableName } from 'src/utils/variable';
import './index.less';

const DecisionSet = (props) => {
  const { logs = {}, value = {}, actions, variable, using_variables, hit_result, isImportant } = props;
  const { rules, variables } = logs;
  const { isExcute } = hit_result;
  const isHasLog = Object.keys(logs).length > 0 && isExcute;
  const isHit = (id) => {
    const currentRule = rules.find((rule) => rule.id === props.value.id);
    if (currentRule) {
      return ((currentRule.conditions || []).find((item) => item.id === id) || {}).hit;
    }
    return undefined;
  };

  const rulesColumns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (_, __, index) => index + 1,
    },
    {
      title: '左变量',
      dataIndex: 'left_var_name',
      render: (_, { left_var_code, left_var_type, left_var_name }) => {
        const tempVarName =
          using_variables && using_variables.length && using_variables.find((item) => item.code === left_var_code)
            ? getVariableName(left_var_code, using_variables)
            : isImportant
            ? left_var_name
            : findVariableName(left_var_type, left_var_code, variable, left_var_name);
        return isHasLog ? <ResultStyle top={tempVarName} bottom={variables[left_var_code]} /> : tempVarName;
      },
    },
    {
      title: '操作符',
      dataIndex: 'operator.symbol',
    },
    {
      title: '右变量',
      dataIndex: 'right_var_name',
      render: (_, { right_var_code, right_var_type, right_var_name }) => {
        const tempVarName =
          using_variables && using_variables.length && using_variables.find((item) => item.code === right_var_code)
            ? getVariableName(right_var_code, using_variables)
            : isImportant
            ? right_var_name || right_var_code
            : findVariableName(right_var_type, right_var_code, variable, right_var_name);
        return right_var_code ? (
          isHasLog ? (
            <ResultStyle top={tempVarName} bottom={variables[right_var_code]} />
          ) : (
            tempVarName
          )
        ) : (
          '-'
        );
      },
    },
    isHasLog
      ? {
          title: '规则结果',
          dataIndex: 'is_hit',
          render: (_, { id }) => {
            if (isHasLog) {
              const className = isHit(id) ? 'hit' : 'not_hit';
              return <span className={className}>{isHit(id) ? 'true' : 'false'}</span>;
            }
          },
        }
      : false,
  ].filter(Boolean);

  const actionColums = (id) => [
    {
      title: '命中状态',
      dataIndex: 'action_type',
      width: 300,
      render: (text) => {
        const hit = text === 'condition_true';
        if (isHasLog) {
          const is_hit = hit_result.isHit && hit ? 'hit' : !hit_result.isHit && !hit ? 'not_hit' : '';
          return <span className={is_hit}>{hit ? '命中' : '未命中'}</span>;
        } else {
          return hit ? '命中' : '未命中';
        }
      },
    },
    {
      title: '动作',
      dataIndex: 'actions',
      render: (text, { action_type }) => {
        const hit = action_type === 'condition_true';
        const is_hit = hit && isHasLog && isHit(id);
        return <Actions {...props} value={text} disabled={true} isHit={is_hit} actions={actions} />;
      },
    },
  ];

  const getRulesBoolean = (express) => {
    let tempExpress = express;
    const { conditions } = value;
    conditions.forEach(({ id }, ruleIndex) => {
      tempExpress = tempExpress.replace(ruleIndex + 1, isHit(id) ? 'true' : 'false');
    });
    return tempExpress;
  };
  const { id, condition_express, conditions, condition_actions } = value;

  const actionTableColumns = actionColums(id);
  return (
    <>
      <div className='set' key={id}>
        <div
          style={{
            marginBottom: '20px',
          }}
        >
          {isHasLog ? (
            <>
              <span>
                条件表达式
                {
                  <span className={hit_result.isHit ? 'hit' : 'not_hit'}>
                    {hit_result.isHit ? '(true)' : '(false)'}
                  </span>
                }
                :
              </span>
              <ResultStyle
                top={condition_express}
                bottom={
                  <span className={hit_result.isHit ? 'hit' : 'not_hit'}>{getRulesBoolean(condition_express)}</span>
                }
              />
            </>
          ) : (
            <span>条件表达式:{condition_express}</span>
          )}
        </div>
        <Table
          columns={rulesColumns}
          dataSource={conditions}
          rowKey='id'
          pagination={false}
          style={{ marginBottom: '20px' }}
        />
        <Table columns={actionTableColumns} dataSource={condition_actions} rowKey='id' pagination={false} />
      </div>
    </>
  );
};
export default DecisionSet;
